<template>
  <div>
  <div class="but">
  <el-row>
    <button @mouseenter="getImgUrl(1)">账户开设<img src="../../../assets/img/1.1.png"></button>
    <button @mouseenter="getImgUrl(2)">成果登记<img src="../../../assets/img/1.2.png"></button>
    <button @mouseenter="getImgUrl(3)">成果认定<img src="../../../assets/img/1.3.png"></button>
  </el-row>
  <el-row>
    <button @mouseenter="getImgUrl(4)">成果转换<img src="../../../assets/img/1.4.png"></button>
    <button @mouseenter="getImgUrl(5)">成果查询<img src="../../../assets/img/1.5.png"></button>
    <button @mouseenter="getImgUrl(6)">学习路径指导<img src="../../../assets/img/1.6.png"></button>
  </el-row>
  </div>
    <div class="ima">
    <img class="image" :src="src">
  </div>
  </div>
</template>

<script>
  export default {
    name:'Content',
    data() {
      return {
        src:require('../../../assets/img/'+1+'.png'),
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      getImgUrl(img) {
         this.src=require("../../../assets/img/" + img + ".png");

      }
    }
  };
</script>
<style>
  .but{
    float:left;
  }
  .ima{
    float: left;
    margin-left: 25px;
  }
  .image{
    float:left;
    width:400px;
    height:300px;
  }
  button{
    width:150px;
    height:150px;
    background-color: #8cc5ff;
  }
</style>
